// page组件
Vue.component('qfPage', {
    props: {
        total: {
            type: Number,
            default: 0,
        },
        pageSize: {
            type: Number,
            default: 2
        }
    },
    data() {
        return {
            totalPage: 0
        }
    },
    watch: {
        // total(newdata, olddata) {}
        total: {
            handler(newdata) {
                // console.log(newdata);
                // this.totalPage = Math.ceil(总条数/每页显示条数)
                // 10 / 2 = 5
                // 11 / 2 = 5.5   要6页
                this.totalPage = Math.ceil(this.total/this.pageSize)
                // console.log(this.totalPage)
            },
            immediate: true,
        }
    },
    template: `<div class="qf-page">
        <span v-for="num in totalPage" @click="$emit('click-page', num)">{{num}}</span>
    </div>`
}) 


// dialog组件 
Vue.component('qfDialog', {
    props: {
        title: {
            type: String,
            default: '默认标题'
        },
        content: String,
        visible: {
            type: Boolean,
            default: false,
        }
    },  
    template: `<div class="qf-dialog" v-if="visible">
        <div class="box">
            <div class="header">{{title}}</div>
            <div class="main">
                {{content}}
            </div>
            <div class="footer">
                <button @click="$emit('update:visible', false)">取消</button>
                <button>确定</button>
            </div>
        </div>
    </div>`
})


Vue.component('qfLoading2', {
    props: {
        state: {
            type: Boolean,
            default: false,
        }
    },
    // template: `<div class="qf-loading2" v-if="state" @click="$emit('close', false)">
    template: `<div class="qf-loading2" v-if="state" @click="$emit('update:state', false)">
        <span>loading...</span>
    </div>`
})

// loading1组件 
Vue.component('qfLoading1', {
    props: {
        state: {
            type: Boolean,
            default: false,
        }
    },
    template: `<div class="qf-loading1" v-if="state">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>`,
})


Vue.component('qfButton', {
    props: {
        content: {
            type: String,
            required: true,
        },
        type: { 
            type: String,
            default: 'primary'
        }
    },
    template: `<button :class="['qf-button', 'qf-button--'+type, 'qf-button--normal']  ">
        <div class="qf-button__content">
        <span class="qf-button__text">{{content}}</span>
        </div>
    </button>` 
})


Vue.component('qfNavBar', {
    props: {
        title: {
            type: String,
            required: true,
        },
        leftArrow: Boolean, // 传就是true，不传就是false
    },
    template: `<div class="qf-nav-bar">
        <span @click="$emit('click-left')">
            {{leftArrow? '<返回' : ' '}}
        </span>
        <span>{{title}}</span>
        <span @click="$emit('click-right')">🔍搜索</span>
    </div>`,
})

Vue.component('qfTable',{
    props:{
        state: {
            type: Boolean,
            default: true
        },
    },
    data(){
        return {
            formData: {
                account:'',
                password:''
            }
        }
    },
    template:`<fieldset>
        <legend>封装表单</legend>
        用户名：<input type="text" v-model="formData.account"/>
        密码：<input type="password" v-model="formData.password"/>
        <button v-if="state" @click="$emit('submit',formData)">提交</button>
    </fieldset>`
})